<template>
	<el-drawer :title="titleMap[mode]" v-model="visible" :size="1600" destroy-on-close @closed="$emit('closed')">
		<el-container v-loading="loading">
			<el-main style="padding:0 20px 20px">
				<el-form ref="ruleForm" :model="form" :rules="rules" label-width="160px">

					<el-form-item label="所属分类" prop="category_id">
						<blCategory style="width: 400px;" v-model="form.category_id" model="Promotion" />
					</el-form-item>

					<el-form-item label="卡券类型" prop="promo_type">
						<el-radio-group style="width: 400px;" v-model="form.promo_type">
							<el-radio-button label="shop">店铺券</el-radio-button>
							<el-radio-button label="product">商品券</el-radio-button>
						</el-radio-group>
					</el-form-item>

					<el-form-item label="优惠名称" prop="promo_name">
						<div style="display: flex;flex-direction: column;gap: 5px;">
							<el-input placeholder="请输入" v-model="form.promo_name" style="width: 400px;" show-word-limit
								maxlength="20"></el-input>
							<el-input type="textarea" style="width: 400px;" v-model="form.promo_remark"
								:autosize="{minRows: 2}" clearable placeholder="备注(不在前台展示)" show-word-limit
								maxlength="200"></el-input>
						</div>
					</el-form-item>

					<el-form-item label="促销起止" prop="promo_starts_at">
						<div style="width: 455px; display: flex;flex-direction: column; gap:5px;">
							<blDatePicker v-model:starts_at="form.promo_starts_at"
								v-model:ends_at="form.promo_ends_at" />
						</div>
					</el-form-item>

					<el-form-item label="低价提醒" prop="promo_max_per_user" v-if="false">
						<div style="display: flex;flex-direction: column;gap: 5px;">
							<el-input :min="1" step="1" :max="1000" placeholder="折后低于原价则告警" type="number"
								v-model.number="form.promo_max_per_user" style="width: 400px;">
								<template #append>
									%
								</template>
							</el-input>
						</div>
					</el-form-item>

					<el-form-item label="商品范围" prop="promo_product_ids" v-if="form.promo_type=='product'">
						<div style="width: 800px;">
							<div>
								<productSelect multiple :params="{
									order: 'product_price_desc',
									selectFilter:{
										product_on_sale:1
									}
								}" ref="productSelect" v-model="form.products"></productSelect>
								<el-button @click="selectProduct" type="primary" size="small"
									style="margin-bottom: 5px;">选择商品</el-button>
								<span style="color:#999;margin-left: 5px;">已选择 {{form.products.length}} 个</span>
							</div>
							<sc-form-table :addTemplate="addTemplate" v-model="form.products" style="flex:1" ref="table"
								drag-sort placeholder="暂无数据" hideAdd :addP>
								<el-table-column class-name="custom-cell" prop="id" label="ID" width="130">
								</el-table-column>
								<el-table-column label="头图" width="62">
									<template #default="scope">
										<el-image style="max-width: 35px; max-height: 35px;" preview-teleported
											hide-on-click-modal
											:src="scope.row.product_image+'?x-oss-process=image/resize,w_35&t='"
											:preview-src-list="[scope.row.product_image]" show-progress fit="contain"
											:z-index="19900501" />
									</template>
								</el-table-column>
								<el-table-column class-name="custom-cell" prop="product_title" label="商品名称" width="200">
								</el-table-column>
								<el-table-column class-name="custom-cell" prop="product_price" label="商品价格" width="100">
								</el-table-column>
								<el-table-column class-name="custom-cell" label="券后价">
									<template #default="{row}">
										{{row.pivot?.discounted_price || '保存后显示'}}
									</template>
								</el-table-column>
							</sc-form-table>
						</div>
					</el-form-item>

					<el-form-item label="过期时间" prop="promo_total_quantity">
						<div style="display: flex;flex-direction: column;gap: 5px;">
							<template v-if="form.promo_effect_type == 'days'">
								<el-input placeholder="" type="number" v-model="form.promo_effect_days"
									style="width: 400px;">
									<template #prepend>
										领取后
									</template>
									<template #append>
										天内有效
									</template>
								</el-input>
							</template>
							<el-radio-group style="width: 400px;" v-model="form.promo_effect_type">
								<el-radio-button label="fixed">固定期限</el-radio-button>
								<el-radio-button label="days">动态期限</el-radio-button>
							</el-radio-group>
						</div>
					</el-form-item>

					<el-form-item label="总发行量" prop="promo_total_quantity">
						<div style="display: flex;flex-direction: column;gap: 5px;">
							<el-input placeholder="设置后只能增加" type="number" v-model="form.promo_total_quantity"
								style="width: 400px;">
								<template #append>
									张
								</template>
							</el-input>
						</div>
					</el-form-item>

					<el-form-item label="每人限领" prop="promo_max_per_user">
						<div style="display: flex;flex-direction: column;gap: 5px;">
							<el-input :min="1" step="1" :max="1000" placeholder="" type="number"
								v-model.number="form.promo_max_per_user" style="width: 400px;">
								<template #append>
									张
								</template>
							</el-input>
						</div>
					</el-form-item>

					<el-form-item label="折扣类型 | 优惠限额" prop="promo_discount_value">
						<el-input class="input-with-select" type="number" style="width: 400px;" placeholder="请输入"
							v-model="form.promo_discount_value">
							<template #prepend>
								<el-select v-model="form.promo_discount_type" placeholder="请选择" style="width: 115px">
									<el-option label="折扣金额" value="fixed" />
									<el-option label="折扣比例" value="percent" />
								</el-select>
							</template>
							<template #append>
								<template v-if="form.promo_discount_type=='fixed'">
									元
								</template>
								<template v-if="form.promo_discount_type=='percent'">
									折
								</template>
							</template>
						</el-input>
					</el-form-item>

					<el-form-item label="优惠条件">
						<div style="display: flex;flex-direction: column;">
							<el-input class="input-with-select-append" type="number" style="width: 400px;"
								placeholder="请输入" v-model.number="form.promo_condition_value">
								<template #prepend>
									满
								</template>
								<template #append>
									<el-select v-model="form.promo_condition_type" placeholder="请选择"
										style="width: 115px">
										<el-option label="元使用" value="amount" />
									</el-select>
								</template>
							</el-input>

							<el-input class="input-with-select-append" type="number" style="width: 400px;
								margin-top: 10px;" placeholder="0或者不填表示不限制" v-model="form.promo_limit_duration">
								<template #prepend>
									在
								</template>
								<template #append>
									<el-select v-model="form.promo_limit_unit" placeholder="请选择" style="width: 115px">
										<el-option label="自然天内" value="day" />
										<el-option label="自然月内" value="month" />
										<el-option label="自然年内" value="year" />
									</el-select>
								</template>
							</el-input>
							<el-input type="number" style="width: 400px;" placeholder="0或者不填表示不限制"
								v-model="form.promo_limit_value">
								<template #prepend>
									限优惠
								</template>
								<template #append>
									<template v-if="form.promo_type=='shop'">
										单
									</template>
									<template v-if="form.promo_type=='product'">
										件
									</template>
								</template>
							</el-input>

						</div>

					</el-form-item>



					<el-form-item label="分销设置" prop="promo_scope_type">
						<div style="display: flex;flex-direction: column; gap: 5px;">

							<el-input class="input-with-select" v-if="form.promo_is_distribution" :min="1" :step="1"
								:max="100" placeholder="" type="number" v-model.number="form.promo_commission_value"
								style="width: 400px;">
								<template #prepend>
									<el-select v-model="form.promo_commission_type" placeholder="请选择"
										style="width: 115px">
										<el-option label="固定金额" value="fixed" />
										<el-option label="按比例" value="percent" />
									</el-select>
								</template>
								<template #append>
									{{form.promo_commission_type == 'fixed'? '元' : '%'}}
								</template>
							</el-input>

							<el-radio-group style="width: 400px;" v-model="form.promo_is_distribution">
								<el-radio-button :label="false">不分销</el-radio-button>
								<el-radio-button :label="true">参与分销</el-radio-button>
							</el-radio-group>



						</div>
					</el-form-item>

					<el-form-item label="推广模式" prop="promo_mode">
						<el-radio-group style="width: 400px;" v-model="form.promo_mode">
							<el-radio-button :label="'system'">系统发放</el-radio-button>
							<el-radio-button :label="'user'">用户领取</el-radio-button>
						</el-radio-group>
					</el-form-item>

				</el-form>
			</el-main>
			<el-footer>
				<el-button type="primary" :loading="isSaveing" @click="submit">保存</el-button>
				<el-button @click="visible=false">取消</el-button>
			</el-footer>
		</el-container>
	</el-drawer>
</template>

<script>
	import {
		defineAsyncComponent
	} from 'vue';
	const scEditor = defineAsyncComponent(() => import('@/components/scEditor'));

	import productSelect from '@/views/shop/adSpace/select/product.vue'


	export default {
		emits: ['success', 'closed'],
		components: {
			scEditor,
			productSelect
		},
		computed: {
			description: {
				get() {
					let str = "";
					if (this.form.promo_condition_value) {
						str += `满${this.form.promo_condition_value}元,`;
					}
					if (this.form.promo_discount_type == 'fixed') {
						str += `减${this.form.promo_discount_value}元`;
					} else if (this.form.promo_discount_type == 'percent') {
						str += `打${this.form.promo_discount_value}折`;
					}
					return str.replace(".00", '');
				}
			}
		},
		data() {
			return {
				loading: false,
				mode: "add",
				addTemplate: {},
				titleMap: {
					add: '添加促销卡券',
					edit: '编辑促销卡券'
				},
				form: {
					id: '',
					products: [],
					category_id: null, // 分类
					promo_name: null,
					promo_remark: null,
					promo_mode: 'system',

					promo_limit_unit: 'day', // 限制周期单位
					promo_limit_duration: null, // 周期长度
					promo_limit_value: null,

					promo_status: 'active',
					promo_effect_type: 'fixed', // 固定期限
					promo_effect_days: null,
					promo_max_per_user: 1, // 每人限领
					promo_total_quantity: 1000, // 总发行量 剩余 promo_remaining_quantity
					promo_commission_value: 1, //分销佣金比例
					promo_commission_type: 'percent',
					promo_is_distribution: false,
					promo_discount_type: 'percent', // 折扣类型
					promo_discount_value: 0, // 优惠值
					promo_starts_at: null,
					promo_ends_at: null,
					promo_type: 'product',
					promo_condition_type: 'amount', // 条件满多少金额
					promo_condition_value: 0,
					promo_is_exclusive: true,
					promo_product_ids: []
				},
				rules: {
					promo_discount_value: [{
						required: true,
						message: '请填写优惠值'
					}],
					promo_name: [{
						required: true,
						message: '请填写计划名称'
					}],
					promo_starts_at: [{
						required: true,
						message: '请选择时间'
					}]
				},
				addTemplate: {
					task_name: "",
					task_api: null,
					task_pre_id: null
				},
				visible: false,
				isSaveing: false,
				apiObj: null,
			}
		},
		mounted() {

		},
		methods: {
			selectProduct() {
				return this.$refs.productSelect.toggleMenu((e) => {
					return;
					if (e.hasOwnProperty('0')) {
						Object.keys(e).forEach(item => {
							this.$refs.table.rowAdd(e[item], 'id');
						})
					}
				});
			},
			success(res) {
				return true;
			},
			//显示
			open(data) {

				this.apiObj = this.$parent.apiObj

				if (data) {
					this.mode = data;
				}
				this.visible = true;
				this.$nextTick(() => {
					if (this.mode == 'add') {

					}
				})
				return this;
			},
			//表单提交方法
			submit() {

				this.$refs.ruleForm.validate(async (data) => {
					if (data) {
						var res;
						this.isSaveing = true;
						if (this.mode == 'add') {
							res = await this.apiObj.create.post(this.form);
						} else {
							res = await this.apiObj.update.post(this.form);
						}
						this.isSaveing = false;
						if (res.code == 0) {
							this.$emit('success', data, this.mode)
							this.visible = false;
							this.$message.success("操作成功")
						} else {
							this.$alert(res.message, "提示", {
								type: 'error'
							})
						}
					}
				})
			},
			//表单注入数据
			setData(data) {
				this.loading = true

				if (!data.id) {
					if (data.category_id) {
						this.form.category_id = data.category_id
					}
					this.loading = false
					return;
				}

				const params = {
					id: data.id
				}
				setTimeout(async () => {
					var res = await this.apiObj.show.get(params)

					this.loading = false
					this.form = res.data
				}, 0)
			}
		}
	}
</script>

<style>
	.custom-cell,
	.custom-cell>.cell {
		padding: 3px !important;

	}

	.custom-cell {
		/*vertical-align: top !important;*/
	}
</style>

<style scoped>
	:deep(.input-with-radio-group) .el-input-group__prepend {
		padding: 2px;
	}

	:deep(.input-with-select) .el-input-group__prepend {
		background-color: #FFF;
	}

	:deep(.input-with-select-append) .el-input-group__append {
		background-color: #FFF;
	}

	.custom-empty {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: #8c939d;
		border-radius: 5px;
	}

	.custom-empty i {
		font-size: 30px;
		color: #fff;
	}

	.custom-empty p {
		font-size: 12px;
		font-weight: normal;
		color: #fff;
		margin-top: 10px;
	}

	.image-container {
		width: 211px;
		height: 434px;
		padding: 50px 10px 0px 10px;
		background-image: url('https://www.zxlee.cn/github/uni-z-paging/phone.png');
		background-size: 211px 434px;
	}
</style>
